<template>
  <div class="app-container">
    <el-form ref="form" :model="queryParams" label-width="90px" :inline="true">
      <el-form-item label="所在院系" prop="userName">
        <el-select
          v-model="queryParams.deptId"
          placeholder="请选择"
          clearable
          filterable 
          class="elSelect"
          style="width: 100%"
        >
          <el-option
            v-for="item in deptOptions"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在年级" prop="userName">
        <el-select
          v-model="queryParams.gradeId"
          placeholder="请选择"
          clearable
          filterable 
          class="elSelect"
          style="width: 100%"
        >
          <el-option
            v-for="item in gradeList"
            :key="item.VALUE"
            :label="item.TITILE"
            :value="item.VALUE"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生类型" prop="userName">
        <el-select
          v-model="queryParams.remarkList"
          multiple
          placeholder="请选择"
          clearable
          filterable 
          class="elSelect"
        >
          <el-option
            v-for="dict in dict.type.basic_speciality_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行政区域类型" prop="bnpType">
        <el-select
          v-model="queryParams.bnpType"
          placeholder="请选择"
          clearable
          filterable 
          class="elSelect"
        >
          <el-option
            v-for="dict in bnpTypeList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float: right; clear: both">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handSearch"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="hancdRese"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="clearfix">
      <span>统计籍贯地图数据</span>
      <el-button-group style="margin-left: 30px;">
        <el-button
          :class="{
            'is-active': viewNative === 'nativeChart',
          }"
          @click="viewNative = 'nativeChart'"
        >
          <i class="el-icon-pie-chart"></i> 籍贯统计图
        </el-button>
        <el-button
          :class="{ 'is-active': viewNative === 'nativeTable' }"
          @click="viewNative = 'nativeTable'"
        >
          <i class="el-icon-tickets"></i> 列表
        </el-button>
      </el-button-group>
    </div>
    <div class="chart-wrapper">
  
        <div v-if="viewNative === 'nativeChart'" ref="mapDom" style="width: 100%; height: 500px"></div>
     

      <el-row v-if="viewNative === 'nativeTable'">
        <el-col :span="24">
             <div style="margin-bottom: 15px">
            <el-input
              v-model="searchNameMap"
              clearable
              size="mini"
              style="width: 30%;"
              placeholder="搜索地区名称"
              @input="handleFilters"
            />
          </div>
          <el-table :data="filteredDatas" border>
             <!-- 第一组 -->
    <el-table-column label="数据组 1" align="center">
       <el-table-column prop="name1" label="市区" align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="value1" label="人数" align="center"/>
    </el-table-column>
    
    <!-- 第二组 -->
    <el-table-column label="数据组 2" align="center">
      <el-table-column prop="name2" label="市区" align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="value2" label="人数" align="center"/>
    </el-table-column>
    
    <!-- 第三组 -->
    <el-table-column label="数据组 3" align="center">
      <el-table-column prop="name3" label="市区" align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="value3" label="人数"  align="center"/>
    </el-table-column>
    <!-- 第四组 -->
    <el-table-column label="数据组 4" align="center">
      <el-table-column prop="name4" label="市区" align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="value4" label="人数" align="center"/>
    </el-table-column>
    <!-- 第四组 -->
    <el-table-column label="数据组 5" align="center">
      <el-table-column prop="name5" label="市区" align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="value5" label="人数" align="center"/>
    </el-table-column>
    <!-- 第四组 -->
    <el-table-column label="数据组 6" align="center">
      <el-table-column prop="name6" label="市区" align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="value6" label="人数" align="center"/>
    </el-table-column>
        
          </el-table>
        </el-col>
      </el-row>
      <!-- <div ref="chart" style="width: 100%; height: 100%;"></div> -->
    </div>
  </div>
</template>
      <script>
import { nativePlaceMap, addressMap } from "@/api/flowable/presentation.js";

import china from "@/json/china.json";
import city from "@/json/city.json";
import * as echarts from "echarts";
export default {
  dicts: ["basic_speciality_type"],
  props: {
    deptOptions: {
      type: Array,
      default: function () {
        return [];
      },
    },
    gradeList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      queryParams: {
        bnpType: "city",
      },
      bnpTypeList: [
        { value: "province", label: "省" },
        { value: "city", label: "市" },
      ],
      nativePlaceMapList: [],
      addressMapMapList: [],
      myChartMap: null,
      viewNative: "nativeChart",
      searchNameMap:''
    };
  },
  created() {
    this.getMapList();

    // nextTick(()=>{
    //     this.mapEcharts()
    // })
  },
  watch: {
    currentList() {
      this.updateChart();
    },
    viewNative(mode) {
      if (mode === "nativeChart") {
        this.$nextTick(() => {
          this.mapEcharts();
        });
      }
    },
  },
  computed: {
    // 将数据拆分成每 4 个一组
    chunkedData() {
      const chunkSize = 6;
      const chunks = [];
      for (let i = 0; i < this.nativePlaceMapList.length; i += chunkSize) {
        const chunk = this.nativePlaceMapList.slice(i, i + chunkSize);
        const row = {
          name1: chunk[0]?.name,
          value1: chunk[0]?.value,
          name2: chunk[1]?.name,
          value2: chunk[1]?.value,
          name3: chunk[2]?.name,
          value3: chunk[2]?.value,
          name4: chunk[3]?.name,
          value4: chunk[3]?.value,
          name5: chunk[4]?.name,
          value5: chunk[4]?.value,
          name6: chunk[5]?.name,
          value6: chunk[5]?.value,
        };
        chunks.push(row);
      }
      return chunks;
    },
     filteredDatas() {
      if (!this.searchNameMap.trim()) return this.chunkedData;
      
      const keyword = this.searchNameMap.toLowerCase();
      return this.chunkedData.filter(row => {
        // 检查所有name字段（name1至name6）
        return [
          row.name1, row.name2, row.name3,
          row.name4, row.name5, row.name6
        ].some(name => name?.toLowerCase().includes(keyword));
      });
    }
  },
  methods: {
    getMapList() {
      nativePlaceMap(this.queryParams).then((res) => {
        console.log(res, "地图数据");
        this.nativePlaceMapList = res.data;
        this.mapEcharts();
      });
    },
handleFilters() {
      // 无需额外操作，计算属性已自动处理
    },
    handSearch() {
      this.getMapList();
    },
    hancdRese() {
      this.queryParams = {};
      this.queryParams.bnpType = "city";
      this.getMapList();
    },
    mapEcharts() {
      // this.myChartMap = echarts.init(this.$refs.mapDom);
      this.myChartMap = echarts.init(this.$refs.mapDom);

      // echarts.registerMap("china", city );
      echarts.registerMap(
        "china",
        this.queryParams.bnpType == "city" ? china : city
      );
      let options = {
        // title: {
        //   text: "中国地图",
        //   sublink:
        //     "https://geo.datav.aliyun.com/areas_v3/bound/100000_full_city.json",
        // },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (人数)",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: true },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 0,
          max: 1500,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "中国",
            type: "map",
            map: "china",
            roam: true,
            label: {
              show: false,
            },
            data: this.nativePlaceMapList,
          },
        ],
      };
      this.myChartMap.setOption(options);
    },
  },
};
// onMounted(()=>{
//
// })
</script>
      <style scopde>
.chart-wrapper {
  width: 100%;
  height: 500px; /* 或使用flex布局 */
}
.multi-column-table {
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.table-header,
.table-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.header-group,
.data-group {
  display: flex;
  flex: 1;
}

.header-cell,
.data-cell {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-right: 1px solid #ebeef5;
}

.header-cell {
  background: #f5f7fa;
  font-weight: bold;
}

.table-row:last-child {
  border-bottom: none;
}
</style>